{% extends 'echartsweb/layout/base_layui.html' %}

<!-- 添加当前页面的标题 -->
{% block title %}
    Echarts基础图形
{% endblock %}

<!-- 添加当前页面的CSS-->
{% block css %}
    <style>
        #echartContainer {
            width: 100%;
            min-height: 500px;
            padding: 20px;
        }

        #echartContainer > div {
            width: 100%;

        }

        #echartContainer > div > div {
            float: left;
            width: 45%;
            height: 300px;
        }
    </style>
{% endblock %}

<!-- 添加当前页面面包屑导航的名称 -->
{% block breadcrumb %}
    Echarts基础图形
{% endblock %}

<!-- 添加当前页面的内容 -->
{% block content %}
    <!-- 内容02: 查询区域 -->
    <div class="queryArea" style="margin-top: 20px;">
        <form class="layui-form" action="" method="post">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_city"><b>城市：</b></label>
                    <div class="layui-input-inline">
                        <input name="q_city" id="q_city" class="layui-input" >

                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_date"><b>日期：</b></label>
                    <div class="layui-input-inline">
                        <input name="q_date" id="q_date" class="layui-input" value="{{ DATA.date }}">

                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" id="btnQuery" class="layui-btn">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>

                </div>
            </div>
        </form>

    </div>



    <div id="echartContainer">
        <div>
            <div id="echarts_basic"></div>
            <div id="echarts_temp"></div>
        </div>
    </div>
{% endblock %}

<!-- 添加当前页面的JS -->
{% block js %}
    <script>
        // 接收数据
        var DATA = {{ weather|safe }};
        $('#q_city').val(DATA.city);
        // 入口函数
        $(function () {
            // 加载基本的图
            loadEchartsBasic();
            // 加载某一个城市未来7天的最高温度和最低温度
            loadCityTemp();
            // 初始化日期
            initDatetimePicker();
        });


        //==========初始化日期模板 ========
        function initDatetimePicker() {
            layui.use('laydate', function () {
                let laydate = layui.laydate;
                laydate.render({
                    elem: '#q_date',
                    value: DATA.today,
                })
            })
        }

        // =============== 加载基本的图=================
        function loadEchartsBasic() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts_basic'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        // ================加载某一个城市未来7天的温度 =======
        function loadCityTemp() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts_temp'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '未来一周气温变化',
                    subtext: DATA.city + "未来7天的气温",
                    left: 'center',

                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['最高气温', '最低气温'],
                    left: 'right',

                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: DATA.temp.date // 日期
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '最高气温',
                        type: 'line',
                        data: DATA.temp.hight,   // 最高气温
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '最低气温',
                        type: 'line',
                        data: DATA.temp.low,  // 最低气温
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: '最大值'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>



{% endblock %}

